<template>
  <div class="showinfo">
   <h2 class="title">今日演出</h2>
   <div class="wrapper" ref="wrapper" v-loading="loadingMask">
      <div class="content" v-show="hasshow" ref="content">
        <el-card :body-style="{ padding: '0px' }" v-for="(item, index) in todayshows" :key="index" class="show" shadow="hover" :ref="'card'+index">
          <img :src="item.pic" class="image">
          <div style="padding: 5px;">
            <div class="name">《{{item.showName}}》</div>
            <div class="info">
              <span class="time">{{item.date}}</span>
              <span class="type">{{item.type}}</span>
            </div>
          </div>
        </el-card>
        <!-- 这里我循环2次来得到更多数据，就可以先看出滚动效果 -->
        <el-card :body-style="{ padding: '0px' }" v-for="item in todayshows" :key="item.data" class="show" shadow="hover" :ref="'card123'+item.data">
          <img :src="item.pic" class="image">
          <div style="padding: 5px;">
            <div class="name">《{{item.showName}}》</div>
            <div class="info">
              <span class="time">{{item.date}}</span>
              <span class="type">{{item.type}}</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="noshow" v-show="!hasshow && !loadingMask">
       <h3>无演出</h3>
      </div>
   </div>
  </div>
</template>

<script>
// 导入网络请求
import { getcurrentdayshowdata } from '../../../network/home'
// 导入插件
import BScroll from 'better-scroll'

export default {
  name: 'todayshow',
  data () {
    return {
      // 储存今天演出信息
      todayshows: [],
      // 今天的日期
      currentday: '',
      hasshow: false,
      // 加载遮罩
      loadingMask: true
    }
  },
  methods: {
    getday () {
      let now = new Date()
      // 获取当前年月
      let cyear = now.getFullYear()
      let cmon = now.getMonth() + 1
      let cday = now.getDate()
      this.currentday = `${cyear}-${this.padLeftZero(cmon + '')}-${this.padLeftZero(cday + '')}`
    },
    gettodayshow () {
      // this.$axios.get('http://localhost:3033/gettoday', { params: { day: this.currentday } })
      getcurrentdayshowdata(this.currentday).then(res => {
        // console.log(res.data)
        this.todayshows = res.data.showData
        this.hasshow = res.data.hasshow
        this.$nextTick(() => {
          if (this.hasshow) {
            // 如果今日演出有数据的时候
            this.setcardw()
            this.loadingMask = false
          } else {
            // 今日演出无数据的时候
            this.$refs.content.style.width = '100%'
            this.loadingMask = false
          }
        })
      })
    },
    // 补0函数
    padLeftZero (str) {
      return ('00' + str).substr(str.length)
    },
    // 设置内容盒子宽度
    setcardw () {
      let cardw = this.$refs.card0[0].$el.offsetWidth
      // 设置content的宽度
      // *2也是因为上面做了2次循环
      this.$refs.content.style.width = cardw * 2 * this.todayshows.length + 80 + 'px'
    },
    createscroll () {
      // 创建滚动
      this.scroll = new BScroll(this.$refs.wrapper, {
        // 横向移动初始位置
        startX: 0,
        // 设置横向移动
        scrollX: true,
        // pc端滑动配置
        mouseWheel: {
          speed: 20,
          invert: false
        }
      })
    }
  },
  created () {
    this.loadingMask = true
    this.getday()
    this.gettodayshow()
  },
  mounted () {
    this.createscroll()
  }
}
</script>

<style lang="stylus" scoped>
.showinfo
  .title
    font-size 24px
    font-weight 700px
    padding-bottom 16px
  .wrapper
    white-space nowrap
    overflow hidden
    width 100%
    .noshow
      height 208px
      line-height 208px
      text-align center
      h3
        font-size 32px
        font-weight 700
        color #cccccc
    .content
      .show
        display inline-block
        margin-left 8px
        width 130px
        .image
          width auto
          height 180px
        .name
          width 80%
          padding-bottom 2px
          white-space nowrap
          text-overflow ellipsis
          overflow hidden
          word-break break-all
          font-size 12px
          font-weight 700
        .info
          position relative
          font-size 8px
          height 12px
          line-height 12px
          .time
            position absolute
            left 0
            font-size 8px
            color #cccccc
          .type
            position absolute
            right 0
            font-size 8px
</style>
